<template>
  <div class="container">
    <el-row :gutter="20" class="marginBottom">
      <el-col :span="24">
        <el-button type="primary" @click="addAreaHandle">添加区域</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="20">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          v-loading="loading"
          class="marginBottom"
        >
          <el-table-column prop="area_name" label="区域名称">
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              > -->
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination  @current-change="handleCurrentChange" background layout="prev, pager, next" :total="total">
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog
      title="添加区域"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-form
        :model="areaInfo"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="区域名称" prop="area_name">
          <el-input
            placeholder="请输入区域名称"
            v-model="areaInfo.area_name"
          ></el-input>
        </el-form-item>
  
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :disabled="submitState" @click="handleClose"
          >取 消</el-button
        >
        <el-button type="primary" @click="submitArea">
          {{ submitState ? "提交中..." : "确定" }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAreaList, deleteArea, addArea } from "@/api/area/index";

export default {
  name: "area",
  data() {
    return {
      tableData: [],
      queryParams: {
        page: 1,
        limit: 10,
      },
      total: 0,
      loading: false,
      dialogVisible: false,
      areaInfo: {
        area_name: "",
       
      },
      areas: [],
      submitState: false,
      rules: {
        area_name: [
          { required: true, message: "请输入区域名称", trigger: "blur" },
        ]
      },
    };
  },
  methods: {
    getData() {
      this.loading = true;
      getAreaList(this.queryParams)
        .then((result) => {
          const { total, data } = result;
          this.tableData = data;
          this.total = total;
          this.loading = false;
        })
        .catch(() => {
          this.tableData = [];
          this.total = 0;
          this.loading = false;
        })
    },
    handleDelete(index, row) {
      deleteArea(row.area_id)
        .then((result) => {
          const { msg, status } = result;
          if (status == "success") {
            this.$message({
              message: "删除区域成功!",
              type: "success",
            });
          } else {
            this.$message.error(msg);
          }
          this.getData();
        })
        .catch(() => {
          this.$message.error("删除区域失败!");
        });
    },
    clearInfo() {
      for (let item in this.schoolInfo) {
        this.schoolInfo[item] = "";
      }
    },
    handleClose() {
      this.dialogVisible = false;
      this.clearInfo();
    },
    addAreaHandle() {
      this.dialogVisible = true;
    },
    submitArea() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.submitState = true;
          addArea(this.areaInfo)
            .then((result) => {
              if (result.status == "success") {
                this.$message({
                  message: "添加区域成功",
                  type: "success",
                });
              } else {
                this.$message.error(result.msg);
              }
              this.getData();
              this.submitState = false;
              this.handleClose();
            
            })
            .catch(() => {
              this.$message.error("添加区域失败!");
              this.submitState = false;
              this.handleClose();
            });
        } else {
          return false;
        }
      });
    },
    handleCurrentChange(page) {
      this.queryParams.page = page;
      this.getData();
    },
  },
  created() {
    this.getData();
  },
};
</script>
<style lang="scss"></style>
